<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./imgs/font/iconfont.css">
</head>

<body>
    <!DOCTYPE html>
    <html>

    <head>
        <link rel="stylesheet" href="./public/weibu.css">
        <script>
            $(".zuihou").load("http://localhost:3000/public/weibu.html .wei")
        </script>
        <style type="text/css">
            .list-b {
                width: 200px;
                height: 200px;
                background-color: lawngreen;
            }

            .list-b img {
                width: 80px;
                height: 80px;
                float: left;
            }

            .list-img {}

            dt {
                border: none !important;
            }

            s {
                color: #333 !important;
            }

            dd {
                background-color: #fff;
                color: #333;
            }

            .minus {
                background-color: #fff !important;
                color: #666;
            }

            .plus {
                background-color: #fff !important;
                color: #666;
            }

            .header {
                background-color: #fff !important;
            }

            * {
                margin: 0;
                padding: 0;
            }

            .fl {
                float: left;
            }

            .fr {
                float: right;
            }

            .clearfix {
                clear: both;
                zoom: 1;
            }

            .shopping {
                width: 1200px;
                margin: 0 auto;
                font-size: 14px;
            }

            .shopping .header {
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: #ccc;
                color: #000000;
                font-weight: bold;
                text-align: left;
            }

            .shopping .header ul {
                padding-left: 30px;
            }

            .shopping .header ul li {
                width: 190px;
                list-style: none;
            }

            .shopping .footer {
                width: 100%;
                height: 50px;
                background: #ccc;
                color: #000000;
                text-align: left;
            }

            .shopping .footer .footlf {
                width: 200px;
                line-height: 50px;
                margin-left: 30px;
            }

            .shopping .footer .footrg {
                width: 600px;
                text-align: right;

            }

            .shopping .footer .footrg span:nth-child(1) {
                display: inline-block;
                padding: 0px 25px;
                background: black;
                color: white;
                line-height: 48px;
                margin-right: 20px;
            }

            .shopping .footer .footrg span:nth-child(2),
            .shopping .footer .footrg span:nth-child(3) {
                display: inline-block;
                margin-right: 20px;
            }

            .shopping .footer .footrg span:nth-child(4) {
                font-size: 16px;
                font-weight: bold;
                line-height: 50px;
                margin-right: 50px;
            }

            .shopping .footer .footrg s {
                color: red;
            }

            .content {
                margin: 10px 0px;
            }

            .content dl {
                margin-bottom: 20px;
            }

            .content dl dt {
                border: 1px solid #CCCCCC;
                height: 30px;
                line-height: 30px;
                font-weight: bold;
            }

            .content dl dt {
                padding-left: 20px;
            }

            .content dl dd {
                padding-left: 20px;
                border: 1px solid #CCCCCC;
                height: 100px;
                line-height: 100px;
                border-top: none;
            }

            .content dl dd ul li {
                list-style: none;
            }

            .content dl dd ul li img {
                width: 80px;
                height: 80px;
                vertical-align: middle;
            }

            .content dl dd ul li {
                width: 190px;
            }

            .content dl dd ul li s {
                color: red;
                font-weight: bold;
            }

            .content dl dd ul li input {
                width: 30px;
            }

            s {
                text-decoration: none;
            }

            .content .del {
                cursor: pointer;
            }

            .minus {
                padding: 0px 10px;
                background: red;
                cursor: pointer;
            }

            .plus {
                padding: 0px 10px;
                background: red;
                cursor: pointer;
            }

            input {
                cursor: pointer;
            }

            /* 头部 */
            * {
                margin: 0;
                padding: 0;
            }

            body,
            html {
                width: 100%;
                background: #f0f0f0;
                color: #f0f0f0;
            }

            a {
                text-decoration: none;
            }

            #nav {
                width: 100%;
                height: 40px;
                background: #333;
                position: fixed;
                top: 0;
                z-index: 10000;

            }

            .nav-jz {
                width: 1200px;
                height: 40px;
                margin: 0 auto;
            }

            .jz-lft {
                width: 300px;
                height: 40px;
                float: left;
            }

            .nav-jz a {
                margin-left: 20px;
                color: #fff;
                line-height: 40px;
                text-decoration: none !important;
            }

            .jz-rig {
                float: right;
                width: 166px;
                height: 40px;
            }

            .jz-rig i {
                margin-left: 20px;
            }

            .diyigejs1 {
                width: 300px;
                height: 80px;
                box-shadow: 0px 0px 3px 0px;
                position: absolute;
                right: 100px;
                top: 45px;
                text-align: center;
                line-height: 80px;
                color: #666;
                display: none;
                background-color: #fff;
                font-size: 12px;
            }

            #nav a {
                font-size: 12px;
                color: #fff;
                margin: 0;
                padding: 0;
                padding-left: 20px;
            }

            /* 360商城 */
            #sp360box {
                width: 1180px;
                height: 102px;
                margin: 0 auto;
                padding-top: 30px;
            }

            .sp360-logo img {
                float: left;
                width: 180px;
                height: 36px;
                margin-top: 33px;
            }

            #sp360box a {
                display: inline-block;
                font-size: 18px;
                color: #333;
                margin: 0px 0 0 40px;
                text-decoration: none;
                margin-top: 40px;
            }


            /* 搜索框 */
            #sp360box .sp360-rigbox {
                float: right;
                position: relative;
            }

            .sp360-rigbox .sp360-rigbox-1 {
                background: rgba(255, 255, 255, 0.8);
                border-radius: 5px;
                position: relative;
                width: 420px;
                height: 36px;
                top: -30px;
                overflow: hidden;
                z-index: 1;

            }

            .sp360-rigbox .sp360-rigbox-1 #txt {
                background: transparent;
                outline: none;
                padding-left: 10px;
                width: 340px;
                float: left;
                border: none;
                line-height: 36px;

            }

            .sousuo {
                width: 50px;
                height: 50px;
                position: relative;
                background-color: white;
                border: none;
            }

            .sousuo i {
                position: absolute;
                display: block;
                width: 50px;
                height: 50px;
                left: 0;
                right: 0;
                margin: 0 auto;
                top: 10px;

            }


            #sp360box .search-suggest-list {
                margin: 0;
                padding: 0;
                float: right;
            }

            #sp360box .search-suggest-list .suggest-item {
                margin: 10px 0 10px 10px;
                font-size: 12px;

                position: relative;
                left: 350px;
            }

            /* 分割线 */
            .zynr {
                width: 100%;
                border-top: 1px solid #000;
                background-color: #fff;
            }

            .zynr1 {
                width: 100%;
                height: 48px;
            }

            .zynr1-jz {
                width: 1200px;
                height: 48px;
                margin: 0 auto;
            }

            .zynr1-jz span a {
                color: #848484;
                line-height: 48px;
                font-size: 14px;
            }

            .jz-span {
                font-size: 15px;
                color: #0e0e0e;
                margin-left: 3px;
            }

            .jz-span-1 {
                font-size: 15px;
                color: #0e0e0e;
                padding-left: 6px;
            }

            .jz-span-1 a {
                margin-left: 20px;
            }

            .jz-span-1 a:nth-child(1) {
                margin-left: 0px;
            }

            .jz-span-2 a {
                margin-left: 20px;
            }

            .zynr1 a:hover {
                color: #23ac38;
            }


            * {
                margin: 0;
                padding: 0;
            }

            .wei {
                width: 100%;
                height: 200px;
                background-color: #333;
                margin: 0 auto;
            }

            .weibu1 {
                width: 1180px;
                height: 81px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #f5f5f5;
            }

            .weibu1 a {
                color: #fff;
                font-size: 24px;
                text-decoration: none;
                display: block;
                margin-top: 20px;
            }

            .wz-jz {
                font-size: 14px;
                width: 100%;
                margin: 0 auto;
                text-align: center;
                line-height: 40px;
                color: #fff;
            }

            .wz-jz2 {
                width: 100%;
                margin: 0 auto;
                text-align: center;
                margin-top: -10px;
                font-size: 14px;
                color: #fff;
            }

            .wz-jz3 {
                width: 100%;
                margin: 0 auto;
                text-align: center;
                margin-top: -10px;
                font-size: 14px;
                color: #fff;
                font-size: 12px;
                color: #666;
                margin-top: 5px;
            }
        </style>
    </head>

    <body>




        </i>
        <div class="body">

            <!-- nav头部 -->
            <div id="nav">
                <div class="nav-jz">
                    <div class="jz-lft">
                        <a href="">帮助中心</a>
                        <a href="">收藏</a>
                        <a href="">360官网</a>
                        <a href="">360智慧生活</a>
                    </div>
                    <div class="jz-rig">
                        <a href="">登录</a>
                        <a href="">注册</a>
                        <i class="iconfont" id="diyigejs">
                            &#xe605;
                        </i>
                        <div class="diyigejs1">
                            您的购物车还没有商品，赶紧去选购吧！
                        </div>
                    </div>

                </div>
            </div>

            <!-- 360商城和搜索框 -->
            <!-- 左边 -->
            <div id="sp360box">
                <h1 class="sp360-logo">
                    <img src="./imgs/logo.png" alt="">
                    <span><a href="">新品推荐</a></span>
                    <span><a href="">热卖榜单</a></span>
                </h1>
                <!-- 右边 -->
                <div class="sp360-rigbox">
                    <div class="sp360-rigbox-1">
                        <input type="text" id="txt">
                        <button class="sousuo"><i class="iconfont">&#xe633;</button>
                    </div>
                    <!-- 右下边 -->
                </div>
                <div class="search-suggest-list">
                    <a href="" class="suggest-item">记录仪</a>
                    <a href="" class="suggest-item">摄像机</a>
                    <a href="" class="suggest-item">路由器</a>
                    <a href="" class="suggest-item">耳机</a>
                    <a href="" class="suggest-item">扫地机</a>
                    <a href="" class="suggest-item">智能手表</a>
                </div>
            </div>


        </div>
        <div class="shopping">
            <div class="header clearfix">
                <ul>
                    <li class="fl"><input type="checkbox" name="" class="all">全选</li>
                    <li class="fl">商品</li>
                    <li class="fl">单价</li>
                    <li class="fl">数量</li>
                    <li class="fl">价格</li>
                    <li class="fl">操作</li>
                </ul>
            </div>
            <div class="content">
                <dl>
                    <dt>店铺：360商城1</dt>
                    <dd>
                        <ul>
                            <li class="fl">
                                <input type="checkbox" name="" class="ischeck">
                            </li>
                            <li class="fl" id="fl1">
                                <!-- <img src="imgs/saodi1.webp" /> -->
                                <!-- <span id="fl-mz">电子拖地</span> -->
                            </li>
                            <li class="fl fl-bq" id="fl2">
                                <!-- <s>￥<span class="price">100</span></s> -->
                            </li>
                            <li class="fl">
                                <span class="minus">-</span>
                                <input type="text" name="" class="count" value="1">
                                <span class="plus">+</span>
                            </li>
                            <li class="fl fl4" id="fl3">
                                <!-- <s>￥<span class="price_sum">100</span></s> -->
                            </li>
                            <li class="fl">
                                <span class="del">删除</span>
                            </li>
                        </ul>
                    </dd>
                </dl>
                <dl>
                    <dt>店铺：360商城2</dt>
                    <dd>
                        <ul>
                            <li class="fl"><input type="checkbox" name="" class="ischeck"></li>
                            <li class="fl" id="fl5">
                                <!-- <img src="imgs/saodi2.webp" />
                            <span>拖把</span> -->
                            </li>
                            <li class="fl">
                                <s>￥<span class="price">40</span></s>
                            </li>
                            <li class="fl">
                                <span class="minus">-</span>
                                <input type="text" name="" class="count" value="1">
                                <span class="plus">+</span>
                            </li>
                            <li class="fl" id="fl6">
                                <!-- <s>￥<span class="price_sum">200</span></s> -->
                            </li>
                            <li class="fl">
                                <span class="del">删除</span>
                            </li>
                        </ul>
                    </dd>
                </dl>
                <dl>
                    <dt>店铺：360商城3</dt>
                    <dd>
                        <ul>
                            <li class="fl"><input type="checkbox" name="" class="ischeck"></li>
                            <li class="fl" id="fl9">
                                <!-- <img src="imgs/saodi3.webp" />
                                <span>电子锅</span> -->
                            </li>
                            <li class="fl" id="fl8">
                                <!-- <s>￥<span class="price">300</span></s> -->
                            </li>
                            <li class="fl">
                                <span class="minus">-</span>
                                <input type="text" name="" class="count" value="1">
                                <span class="plus">+</span>
                            </li>
                            <li class="fl">
                                <s>￥<span class="price_sum">300</span></s>
                            </li>
                            <li class="fl">
                                <span class="del">删除</span>
                            </li>
                        </ul>
                    </dd>
                </dl>
            </div>
            <div class="footer clearfix">
                <div class="footlf fl">
                    <input type="checkbox" name="" class="all_is">反选
                    <input type="checkbox" name="" id="cancel">取消
                </div>
                <div class="footrg fr">
                    <span>继续购物</span>
                    <span>已选商品<s id="piece">0</s>件</span>
                    <span>合计(不含运费)：￥<s class="sum_">0.00</s></span>
                    <span>结算</span>
                </div>
            </div>
        </div>


        <div class="wei">
            <div class="weibu1">
                <a href="">
                    <i class="iconfont
                 ">&#xe67d;</i> 七天无理由退货</a>
                <a href="">
                    <i class="iconfont
                    ">&#xe67d;</i> 15天免费换货</a>
                <a href="">
                    <i class="iconfont
                        ">&#xe67d;</i> 满99包邮</a>

            </div>

            <div class="wz-jz">
                ©2019-2021 mall.360.cn版权所有
            </div>
            <div class="wz-jz2">
                京ICP备08010314号-6 营业执照
            </div>

            <div class="wz-jz3">
                公司名称：北京视觉世界科技有限公司 | 社会统一信用代码：91110105336460203N | 食品经营许可证
            </div>
            <div class="wz-jz3">
                公司地址：北京市朝阳区酒仙桥路6号院2号楼1至17层102号内5层501 | 联系方式：400-6822-360
            </div>
        </div>

        <!-- 尾部 -->
    </body>
    <script src="./js/ajax.js"></script>
    <script>
        // ajax渲染
        // ajax渲染
        class List {
            constructor() {
                this.cont1 = document.getElementById("fl1")
                this.cont2 = document.getElementById("fl2")
                this.cont3 = document.getElementById("fl3")
                this.cont4 = document.getElementById("fl5")
                this.cont5 = document.getElementById("fl6")
                this.cont7 = document.getElementById("fl9")
                 this.cont8 = document.getElementById("fl8")
                console.log(this.cont)
                this.url = "http://localhost:3000/database/msg.json";
                this.load();
                console.log(this.cont)
            }
            load() {
                ajax({
                    url: this.url,
                    success: (res) => {
                        this.res = JSON.parse(res).msg;
                        console.log(this.res);
                        this.render();
                    }
                })
            }
            render() {
                let str = "";
                let astr = "";
                let bstr = "";
                let cstr = "";
                let dstr = "";
                let estr = "";
                let fstr = "";


                str += ` 
            
             <img src="${this.res[1].img}" alt=""> 
             <span>${this.res[1].proName}</span>
           `
               astr += ` 
            <s>$</s>
            <span class="price">${this.res[1].price} </span> 
           
          `
                bstr += ` 
            <s>$</s>
            <span class="price_sum">${this.res[1].price} </span> 
           
          `

                cstr += ` 
            
            <img src="${this.res[2].img}" alt=""> 
            <span>${this.res[2].proName}</span>
          `
         
          dstr += ` 
            <s>$</s>
            <span class="price_sum">${this.res[2].price} </span> 
           
          `

          estr += ` 
            
          <img src="${this.res[4].img}"alt=""> 
            <span>${this.res[4].proName}</span>
          `

          fstr += ` 
            <s>$</s>
            <span class="price">${this.res[1].price} </span> 
           
          `
          

                this.cont1.innerHTML = str;
                this.cont2.innerHTML = astr;
                this.cont3.innerHTML = bstr;
                this.cont4.innerHTML = cstr;
                this.cont5.innerHTML = dstr;
                this.cont7.innerHTML = estr;
                this.cont8.innerHTML = fstr;
            }
        }
        new List()
    </script>
    <script type="text/javascript">
        //购物车功能要求
        //1.勾选全选框 商品勾选状态为已勾选状态 并且计算商品合计  单价合计
        //2.取消勾选时取消所以商品勾选
        var del = document.getElementsByClassName("del");//删除
        var dl = document.getElementsByTagName("dl");
        var all = document.getElementsByClassName("all")[0];//获取全选按钮
        var all_is = document.getElementsByClassName("all_is")[0];//获取取反按钮
        var ischeck = document.getElementsByClassName("ischeck");//获取商品勾选状态复选框节点
        var minus = document.getElementsByClassName("minus");//商品减
        var plus = document.getElementsByClassName("plus");//商品加
        var count = document.getElementsByClassName("count");//商品数量
        var price = document.getElementsByClassName("price");//获得单价
        var price_sum = document.getElementsByClassName("price_sum");//获得商品价格
        var sum_ = document.getElementsByClassName("sum_")[0];//获得商品总价格
        var piece = document.getElementById("piece");//已选商品件数
        var cancel = document.getElementById("cancel");//取消选择

        //全选功能
        all_();
        function all_() {
            all.onchange = function () {
                //当全选框状态为ture 的时候循环勾选  商品状态   为false 则相反
                if (all.checked) {
                    for (var i = 0; i < ischeck.length; i++) {
                        ischeck[i].checked = true;
                    }
                    piece_();//已选商品件数
                }
                else {
                    for (var i = 0; i < ischeck.length; i++) {
                        ischeck[i].checked = false;
                    }
                    piece_();//已选商品件数
                }
                shss();//每次商品勾选或者数量发生改变计算总额数
            }
        }
        //商品状态勾选 
        comm_ischeck();
        function comm_ischeck() {
            for (var i = 0; i < ischeck.length; i++) {
                (function (j) {
                    ischeck[j].onclick = function () {
                        shss();//每次商品勾选或者数量发生改变计算总额数
                        piece_();//每次商品勾选状态发生变化计算已选商品件数

                        for (var k = 0; j < ischeck.length; k++) {//循环判断商品勾选状态
                            if (!ischeck[k].checked) {//如果有一个为flase 则全选框取消勾选
                                all.checked = false;
                                break; //结束循环
                            }
                            //否则勾选
                            all.checked = true;
                        }
                    }
                })(i)
            }
        }
        //反选
        all_iss();
        function all_iss() {
            all_is.onchange = function () {
                //循环遍历勾选状态 商品状态勾选则取消勾选
                for (var i = 0; i < ischeck.length; i++) {
                    ischeck[i].checked = ischeck[i].checked ? false : true;
                }
                shss();//每次商品勾选或者数量发生改变计算总额数
                piece_();//每次商品勾选状态发生变化计算已选商品件数
            }
        }
        //减少商品
        add_is();
        function add_is() {
            for (var i = 0; i < minus.length; i++) {
                (function (i) {
                    minus[i].onclick = function () {
                        if (parseInt(count[i].value) < 2) {
                            count[i].value = 1;
                        }
                        else {
                            count[i].value = parseInt(count[i].value) - 1;
                        }
                        // parseInt(count[i].value) 因为得到的value 是string 类型 运算需要进行类型转换
                        //如果数量值<1默认为0
                        //count[i].value=parseInt(count[i].value)<1?0:(parseInt(count[i].value)-1);

                        var pric = price[i].innerHTML;//商品单价
                        price_sum[i].innerHTML = parseInt(pric) * parseInt(count[i].value);//商品总结价格等于=商品单价*商品数量

                        shss();//每次商品勾选或者数量发生改变计算总额数
                        piece_();//每次商品勾选状态发生变化计算已选商品件数
                    }
                })(i)
            }
        }
        //添加商品
        add();
        function add() {
            for (var i = 0; i < plus.length; i++) {
                //立即执行函数得到下标
                (function (i) {
                    plus[i].onclick = function () {
                        var pric = price[i].innerHTML;//商品单价
                        //因为得到的value 是string 类型 运算需要进行类型转换
                        count[i].value = parseInt(count[i].value) + 1;//改变数量值
                        price_sum[i].innerHTML = parseInt(pric) * parseInt(count[i].value);//商品总结价格等于=商品单价*商品数量
                        shss();//每次商品勾选或者数量发生改变计算总额数
                        piece_();//每次商品勾选状态发生变化计算已选商品件数
                    }
                })(i)
            }
        }
        //count
        count_();
        function count_() {
            for (var i = 0; i < count.length; i++) {
                (function (i) {
                    count[i].onchange = function () {
                        var pric = price[i].innerHTML;//商品单价
                        //因为得到的value 是string 类型 运算需要进行类型转换
                        count[i].value = parseInt(count[i].value) + 1;//改变数量值
                        price_sum[i].innerHTML = parseInt(pric) * parseInt(count[i].value);//商品总结价格等于=商品单价*商品数量
                        shss();//每次商品勾选或者数量发生改变计算总额数
                        piece_();//每次商品勾选状态发生变化计算已选商品件数
                    }
                })(i)
            }
        }

        //计算已选商品件数
        piece_();
        function piece_() {
            piece.innerHTML = 0;
            for (var i = 0; i < ischeck.length; i++) {
                if (ischeck[i].checked) {
                    piece.innerHTML = parseInt(piece.innerHTML) + parseInt(count[i].value);
                }
            }
        }

        //计算商品总额
        shss();
        function shss() {
            sum_.innerHTML = 0;
            for (var i = 0; i < ischeck.length; i++) {
                if (ischeck[i].checked) {
                    console.log(sum_.innerHTM);
                    sum_.innerHTML = parseInt(sum_.innerHTML) + parseInt(price_sum[i].innerHTML);
                }
            }
        }

        //取消选择
        cancel_();
        function cancel_() {
            //取消按钮点击事件
            cancel.onclick = function () {
                for (var i = 0; i < ischeck.length; i++) {
                    ischeck[i].checked = false;
                }
                shss();
                piece_();
            }
        }
        //删除
        del_();
        function del_() {
            for (var i = 0; i < del.length; i++) {
                (function (i) {
                    del[i].onclick = function () {
                        dl[i].parentNode.removeChild(dl[i]);
                        shss();//每次商品勾选或者数量发生改变计算总额数
                        piece_();//每次商品勾选状态发生变化计算已选商品件数
                    }
                })(i)
            }
        }

    </script>






    </html>